<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media">
        <!-- <router-link :to="'/home/newsinfo/'+item.id"> -->
        <router-link to="/home/newsinfo">
          <img
            class="mui-media-object mui-pull-left"
            src="../../imgs/menu1.png"
          />
          <div class="mui-media-body">
            <h3>幸福</h3>
            <p class="mui-ellipsis">
                <!-- <>{{item.add_time | dateFormat()}}</span>  加上过滤器通过它格式化我们的时间-->
              <span>发表时间：2020-5-20</span>
              <span>点击：1次</span>
            </p>
          </div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
          <img
            class="mui-media-object mui-pull-left"
            src="../../imgs/menu1.png"
          />
          <div class="mui-media-body">
            <h3>木屋</h3>
            <p class="mui-ellipsis">
              <span>发表时间：2020-5-20</span>
              <span>点击：1次</span>
            </p>
          </div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
          <img class="mui-media-object mui-pull-left" src="../../imgs/menu1.png" />
          <div class="mui-media-body">
            <h3>CBD</h3>
            <p class="mui-ellipsis">
              <span>发表时间：2020-5-20</span>
              <span>点击：1次</span>
            </p>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    data() {
        return {
            list:[]
        }
    },
    methods: {
      async  getnewslist(){
        //   获取新闻列表
         const {data}  =await this.$http.get('/api/getnewslist')
        //  如果获取数据成功，则把数据挂载到data上
         if(data.status===0)  this.list=data.message
        }
    },
    created() {
        this.getnewslist()
    },
};
</script>

<style lang="less" scoped>
.mui-media-body{
    h3{
        font-size: 16px;
    }
    .mui-ellipsis{
        color: blue;
        display: flex;
        // 从上到下的主轴
        justify-content: space-between;
        // 从左向右的侧轴
        // align-items: ;
    }
}
</style>